<template>
  <div id="app">
    <el-button @click="addFlagDia" type="primary" size="small">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="id" label="类目ID" width="150"></el-table-column>
      <el-table-column prop="cname" label="类目名" width="120"></el-table-column>
      <el-table-column label="类目图标" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.cicon_url" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column label="类目图片" width="183">
        <template slot-scope="scope">
          <img :src="scope.row.label" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="cdesc" label="简介" width="250"></el-table-column>
      <el-table-column prop="clevel" label="级别" :formatter="formatter" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="delClick(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 添加 -->
    <el-dialog title="编辑" :visible.sync="addFlag">
      <el-form :model="form" :rules="rules">
        <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
        <el-form-item label="类目名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="级别">
          <el-select v-model="form.level" placeholder="请选择" v-on:change="abc()">
            <el-option
              v-for="bean in clevelList"
              :label="bean.name"
              :key="bean.id"
              :value="bean.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父类目" v-if="xxx">
          <el-select v-model="form.id" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类目图标">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="1"
            multiple
            accept="application/jpg"
            :file-list="fileList1"
            list-type="picture"
            :on-change="handlerChange1"
            :on-remove="handleRemove1"
          >
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="类目图片">
          <el-upload
            class="avatar-uploader"
            ref="upload2"
            action
            :auto-upload="false"
            :limit="1"
            multiple
            accept="application/jpg"
            :file-list="fileList2"
            list-type="picture"
            :on-change="handlerChange2"
            :on-remove="handleRemove2"
          >
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="addFlagObject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    addFlagObject() {
      var $this = this;
      var formData = new FormData();
      for (var i in $this.form) {
        formData.append(i, $this.form[i]);
      }
      console.log("this.fileList:{}", this.fileList);

      this.fileList1.forEach(function(file) {
        console.log(file);
        if (file.raw) {
          formData.append("files1", file.raw, file.name);
        }
      });
      this.fileList2.forEach(function(file) {
        console.log(file);
        if (file.raw) {
          formData.append("files2", file.raw, file.name);
        }
      });

      //设置图片上传的格式
      let config = {
        "Content-Type": "multipart/form-data"
      };

      this.axios({
        method: "post",
        url: "http://localhost:9999/market/ecCategory/xujiabao/add",
        data: formData,
        config: config
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.form = {};
          $this.addFlag = false;
          $this.fileList1 = '';
          $this.fileList2 = '';
          $this.getCateList();
        }
      });
    },
    handleClick(row) {
      var $this = this;
      $this.fileList1 = [];
      $this.fileList2 = [];
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/market/ecCategory/xujiabao/selectByIds?id=" +row.id
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.form = res.data.obj;
          var tmp = {};
          tmp.name = res.data.obj.iconUrl;
          tmp.url = res.data.obj.iconUrl;
          $this.fileList1.push(tmp);
          var tmp1 = {};
          tmp1.name = res.data.obj.picUrl;
          tmp1.url = res.data.obj.picUrl;
          $this.fileList2.push(tmp1);
          $this.addFlag = true;
        }
      });
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([]);
      }, 1000);
    },
    addFlagDia(){
      this.addFlag=true;
      for(var i in this.form){
          this.form[i]=null;
      }
    },
    abc() {
      var $this = this;
      if ($this.form.level == "L1") {
        $this.xxx = false;
      } else if ($this.form.level == "L2") {
        $this.xxx = true;
      }
    },
    handlerChange1(file, files) {
      this.fileList1 = files;
      console.log("----fileList1:{}", this.fileList1);
    },
    handleRemove1(file, fileList1) {
      console.log(file, fileList1);
      console.log("删除之前this.imageUrs", this.imageUrs1);

      for (var i = 0; i < this.imageUrs1.length; i++) {
        if (this.imageUrs1[i] == file.url) {
          this.imageUrs1.splice(i, 1);
        }
      }
      console.log("删除之后this.imageUrs", this.imageUrs1);
    },
    handlerChange2(file, files) {
      this.fileList2 = files;
      console.log("----fileList2:{}", this.fileList2);
    },
    handleRemove2(file, fileList2) {
      console.log(file, fileList2);
      console.log("删除之前this.imageUrs", this.imageUrs2);

      for (var i = 0; i < this.imageUrs.length; i++) {
        if (this.imageUrs2[i] == file.url) {
          this.imageUrs2.splice(i, 1);
        }
      }
      console.log("删除之后this.imageUrs", this.imageUrs2);
    },
    delClick(row) {
      alert(row);
      var $this = this;
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/market/ecCategory/xujiabao/logicdel?id=" + row
      }).then(function(res) {
        if (res.data.code == 200) {
          alert("删除成功");
          $this.getCateList();
        } else {
          alert("删除有误");
        }
      });
    },
    formatter(row) {
      if (row.clevel == "L1") {
        return "一级目录";
      } else if (row.clevel == "L2") {
        return "二级目录";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getCateList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getCateList();
    },
    getParentList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/market/ecCategory/xujiabao/paretList"
      }).then(function(res) {
        $this.options = res.data.obj;
      });
    },
    getCateList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/market/ecCategory/xujiabao/cateList",
        params: {
          pageNo: this.currentPage4,
          pageSize: this.pageSize
        }
      }).then(function(res){
        $this.tableData = res.data.obj.list;
        $this.total = res.data.obj.total;
      })
    }
  },
  data() {
    return {
      currentPage4: 1,
      pageSize: 4,
      tableData: [],
      total: 0,
      hasChildren: true,
      addFlag: false,
      formLabelWidth: "200px",
      form: {
        
      },
      rules: {
        name: [{ required: true, trigger: "blur", message: "类目不能为空" }]
      },
      fileList1: [],
      fileList2: [],
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrs: [],
      imageUrs1: [],
      imageUrs2: [],
      clevelList: [
        { id: "L1", name: "一级目录" },
        { id: "L2", name: "二级目录" }
      ],
      options: [],
      xxx: true
    };
  },
  mounted() {
    this.getCateList();
    this.getParentList();
  }
};
</script>